<template>
    <div>
        <el-dialog :model-value="props.addInfo?.isShow" :title="props.addInfo?.isAdd ? '添加角色' : '编辑角色'" center @close="cancel">
            <el-form :model="roleForm" :rules="rules" ref="formRef">
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="rolename">
                    <el-input v-model="roleForm.rolename" autocomplete="off" />
                </el-form-item>

                <el-form-item label="角色权限" :label-width="formLabelWidth">
                    <el-tree 
                    ref="tree"
                    :data="store.getters['menu/getMenuList']" 
                    :default-checked-keys="roleForm.menus.split(',')"
                    show-checkbox 
                    node-key="id"
                    default-expand-all
                    :props="{ children: 'children', label: 'title' }" 
                    check-strictly />
                </el-form-item>

                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="roleForm.status"
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;" :active-value="1"
                        :inactive-value="2" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click='cancel'>取消</el-button>
                    <el-button type="primary" @click="confirm">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useStore } from 'vuex';
import { defineProps, defineEmits, defineExpose } from 'vue';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { roleadd, roleedit, roleinfo } from '@/request/api';
let store = useStore();
store.dispatch('menu/ChangeMenuAction')
let props = defineProps({
    addInfo: Object
});
let emit = defineEmits(['cancel']);
let formLabelWidth = ref('120px');
let formRef = ref<FormInstance>();
let tree = ref<FormInstance>();
let roleForm = ref({
    rolename: '', //角色名称
    menus: "", //角色权限 (需要这种数据格式  1,2,3,4  )
    status: 1, //状态   1正常2禁用   number类型number
});
let rules = reactive<FormRules>({
    rolename: [
        { required: true, message: '请输入角色名称', trigger: 'blur' },
        { min: 2, max: 11, message: '长度 2 到 11 ', trigger: 'blur' },
    ]
});
let reset = () => {
    roleForm.value = reactive({
        rolename: '', //角色名称
        menus: "", //角色权限 (需要这种数据格式  1,2,3,4  )
        status: 1, //状态   1正常2禁用   number类型number
    });
    formRef.value?.resetFields();
    tree.value?.setCheckedKeys([])//重置树形控件
}
let cancel = () => {
    emit('cancel', false);
    reset()
};
let lookup = (id: number) => {
    roleinfo({ id }).then((res: any) => {
        if (res.data.code == 200) {
            roleForm.value = res.data.list;
            roleForm.value.id = id;
            // roleForm.value.menus ? tree.value?.setCheckedKeys(roleForm.value.menus.split(',')) : tree.value?.setCheckedKeys([])
            console.log(roleForm);
            
        } else {
            ElMessage.error(res.data.msg)
        }
    })
}
let confirm = () => {
    formRef.value?.validate((val) => {
        if (val) {
            roleForm.value.menus = tree.value?.getCheckedKeys().join(',');
            if (props.addInfo?.isAdd) {
                roleadd(roleForm.value).then((res: any) => {
                    if (res.data.code == 200) {
                        ElMessage.success(res.data.msg)
                        cancel();
                        store.dispatch('role/changeRoleAction')
                    } else {
                        ElMessage.error(res.data.msg)
                    }
                })
            } else {
                roleedit(roleForm.value).then((res: any) => {
                    if (res.data.code == 200) {
                        ElMessage.success(res.data.msg)
                        cancel();
                        store.dispatch('role/changeRoleAction')
                    } else {
                        ElMessage.error(res.data.msg)
                    }
                })
            }
        }
    })
};
defineExpose({
    lookup
})
</script>

<style scoped></style>